import React from "react";
import {Image, ScrollView, Text, TouchableHighlight, View} from "react-native";
import {NavigationEvents} from "react-navigation";
import Carousel from "@ant-design/react-native/lib/carousel";

import styles from "./style";
import AroPlaceholder from "../../components/AroPlaceholder";
import {Icon} from "../../components/AroIconfont";
import colors from "../../styles/colors";

export default (self, timeinterval, timeintervalArr) => (
  <ScrollView style={styles.scrollContainer}>
    <NavigationEvents
      onDidFocus={() => self.props.getAllTicker()}
      onDidBlur={() => timeintervalArr.forEach(item => clearInterval(item))}
    />
    <View style={styles.container}>

      <View style={styles.homeTopContainer}>
        <View style={styles.bannerContainer}>
          {
            self.props.banner.length !== 0 ? (<Carousel
              autoplay
              infinite
              selectedIndex={0}
              autoplayInterval={6000}
            >
              {
                self.props.banner.map((img) => (
                  <Image key={img.id} style={styles.bannerImage} source={{uri: img.a_img_file}}/>
                ))
              }
            </Carousel>) : <AroPlaceholder/>
          }
        </View>
        <View style={styles.noticeContainer}>
          <View style={styles.noticeInner}>
            <Text style={styles.noticeIcon}>
              <Icon name={'aroIcon|iconnotice'} size={13} color={colors.darkIconGray}/>
            </Text>
            <View style={styles.noticeList}>
              {
                self.props.newsNoticeList.list ? (<Carousel
                  vertical
                  dots={false}
                  infinite
                  autoplay
                  autoplayInterval={5000}
                >
                  {
                    self.props.newsNoticeList.list.map((notice) => (
                      <Text key={notice.id} numberOfLines={1} ellipsizeMode="tail" style={styles.noticeText}>
                        {notice.a_title}
                      </Text>
                    ))
                  }
                </Carousel>) : <AroPlaceholder/>
              }
            </View>
          </View>
        </View>
        <View style={styles.tickerShowContainer}>
          <View style={styles.tickerShowInner}>
            {
              self.topTickerShow(3).length !== 0 ? (self.topTickerShow(3).map((ticker) => (
                <TouchableHighlight
                  underlayColor={colors.hoverGray}
                  key={ticker.order}
                  onPress={() => {
                    alert(ticker.close)
                  }}
                  style={styles.tickerShowTouch}
                >
                  <View style={styles.tickerShowBox}>
                    <Text style={styles.tickerShowText1}>
                      {ticker.dspName}
                    </Text>
                    <Text style={{color: self.changeColor(ticker.close, ticker.open), ...styles.tickerShowText2}}>
                      {ticker.close}
                    </Text>
                    <Text style={{color: self.changeColor(ticker.close, ticker.open), ...styles.tickerShowText3}}>
                      {self.changePercent(ticker.close, ticker.open)}
                    </Text>
                    <Text style={styles.tickerShowText4}>
                      ≈{ticker.close}
                    </Text>
                  </View>
                </TouchableHighlight>
              ))) : <AroPlaceholder/>
            }
          </View>
        </View>
      </View>

      {/*<View style={{backgroundColor: colors.backgroundGray, height: 90, marginLeft: 15, marginRight: 15, marginBottom: 10, flexDirection: 'row'}}>*/}
      {/*  <View style={{backgroundColor: 'lightyellow', flex: 3, marginRight: 10, borderRadius: 4}}>*/}

      {/*  </View>*/}
      {/*  <View style={{flex: 2, justifyContent: 'space-between'}}>*/}
      {/*    <View style={{backgroundColor: 'lightblue', height: 40, borderRadius: 4}}>*/}

      {/*    </View>*/}
      {/*    <View style={{backgroundColor: 'lightpink', height: 40, borderRadius: 4}}>*/}

      {/*    </View>*/}
      {/*  </View>*/}
      {/*</View>*/}

      <View style={styles.homeBottomContainer}>
        <Text style={styles.homeBottomHeader}>精选币种</Text>
        {
          self.bottomTickerList().length !== 0 ? (self.bottomTickerList().map((ticker, index) => (
            <TouchableHighlight
              underlayColor={colors.hoverGray}
              key={ticker.order}
              style={styles.tickerListTouch}
              onPress={() => {
                alert(ticker.close)
              }}
            >
              <View style={styles.tickerListBox}>
                <View style={styles.tickerListNumber}>
                  <Text style={{color: index < 5 ? colors.green : colors.lightgray, ...styles.tickerListNumberText}}>
                    {index + 1}.
                  </Text>
                </View>
                <View style={styles.tickerListData}>
                  <View style={styles.tickerListDataTop}>
                    <Text style={styles.tickerListTop1}>{ticker.dspName}</Text>
                    <Text style={styles.tickerListTop2}>{ticker.close}</Text>
                  </View>
                  <View style={styles.tickerListDataBottom}>
                    <Text style={styles.tickerListBottom1}>24H量 {ticker.volume}</Text>
                    <Text style={styles.tickerListBottom2}>¥ {ticker.close}</Text>
                  </View>
                </View>
                <View style={styles.tickerListRate}>
                  <Text
                    style={{backgroundColor: self.changeColor(ticker.close, ticker.open), ...styles.tickerListRateText}}>
                    {ticker.percent}
                  </Text>
                </View>
              </View>
            </TouchableHighlight>
          ))) : <AroPlaceholder/>
        }
      </View>
    </View>
  </ScrollView>
);